<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>仓库</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <script th:src="@{/layui/layui.js}"></script>
    <script th:src="@{/jquery-2.2.4.js}"></script>
    <style type="text/css">
        p{
            font-size: 30px;
            color: darkorange;
        }
    </style>
</head>
<body style="background-image: url('../img/digitization.jpg')">
<div style="height: 60px;margin-left: 15%">
    <div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md6">
            <i class="layui-icon layui-icon-component" style="font-size: 40px;color: red" >  仓库占用中</i>

        </div>
        <div class="layui-col-md6">
            <i class="layui-icon layui-icon-component" style="font-size: 40px;color: aliceblue" > 仓库为空</i>

        </div>
    </div>
    </div>
</div>
<div class="layui-container"style="margin-top: 3%;margin-left: 10%">
    <div class="layui-row layui-col-space20" >
        <div class="layui-col-md3">
            <i id="r1" class="layui-icon layui-icon-component" style="font-size: 80px;color: red" ></i>
        <p>1号</p>
        </div>
        <div class="layui-col-md3">
            <i id="c2" class="layui-icon layui-icon-component" style="font-size: 80px;color: red" ></i>
            <p>2号</p>
        </div>
        <div class="layui-col-md3">
            <i id="c3" class="layui-icon layui-icon-component" style="font-size: 80px;color: red" ></i>
            <p>3号</p>
        </div>
        <div class="layui-col-md3">
            <i id="c4" class="layui-icon layui-icon-component" style="font-size: 80px;color: white" ></i>
            <p>4号</p>
        </div>

    </div>
<!--    row 2-->
    <div class="layui-row layui-col-space20" >
        <div class="layui-col-md3">
            <i id="c5" class="layui-icon layui-icon-component" style="font-size: 80px;color: red" >
                <p>5号</p>


            </i>

        </div>
        <div class="layui-col-md3">
            <i id="c6" class="layui-icon layui-icon-component" style="font-size: 80px;color: red" ></i>
            <p>6号</p>
        </div>
        <div class="layui-col-md3">
            <i id="c7" class="layui-icon layui-icon-component" style="font-size: 80px;color: red" ></i>
            <p>7号</p>
        </div>
        <div class="layui-col-md3">
            <i id="c8" class="layui-icon layui-icon-component" style="font-size: 80px;color: red" ></i>
            <p>8号</p>
        </div>

    </div>
<!--    row 3-->
    <div class="layui-row layui-col-space20" >
        <div class="layui-col-md3">
            <i id="c9" class="layui-icon layui-icon-component" style="font-size: 80px;color: red" ></i>
            <p>9号</p>
        </div>
        <div class="layui-col-md3">
            <i id="c10" class="layui-icon layui-icon-component" style="font-size: 80px;color: white" ></i>
            <p>10号</p>
        </div>
        <div class="layui-col-md3">
            <i id="c11" class="layui-icon layui-icon-component" style="font-size: 80px;color: red" ></i>
            <p>11号</p>
        </div>
        <div class="layui-col-md3">
            <i id="c12" class="layui-icon layui-icon-component" style="font-size: 80px;color: white" ></i>
            <p>12号</p>
        </div>

    </div>
</div>

<script>
// $("#one").style.attr("color","white");
var socket;
openSocket();
function openSocket() {
    if(typeof(WebSocket) == "undefined") {
        console.log("您的浏览器不支持WebSocket");
    }else{
        console.log("您的浏览器支持WebSocket");
        //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
        //等同于socket = new WebSocket("ws://localhost:8888/xxxx/im/25");
        //var socketUrl="${request.contextPath}/im/"+$("#userId").val();
        var socketUrl="ws://localhost:8888/respository/state";
        // socketUrl=socketUrl.replace("https","ws").replace("http","ws");
        console.log(socketUrl);
        if(socket!=null){
            socket.close();
            socket=null;
        }
        socket = new WebSocket(socketUrl);
        //打开事件
        socket.onopen = function() {
            console.log("websocket已打开");
            socket.send("这是来自客户端的消息" + location.href + new Date());
        };
        //获得消息事件
        socket.onmessage = function(msg) {
          var data=  JSON.parse(msg.data);
          for(var i =1;i<=data.length;i++){
            if(data[i-1].state == 0){
                document.getElementById("c"+i).style.color = "white";
            }
          }


            //发现消息进入    开始处理前端触发逻辑
        };
        function updatedate(i){
            document.getElementById("c"+i).style.color = "white";
        }
        //关闭事件
        socket.onclose = function() {
            console.log("websocket已关闭");
        };
        //发生了错误事件
        socket.onerror = function() {
            console.log("websocket发生了错误");
        }
    }
}
function sendMessage() {
    if(typeof(WebSocket) == "undefined") {
        console.log("您的浏览器不支持WebSocket");
    }else {
        console.log("您的浏览器支持WebSocket");

    }
}

</script>
</body>
</html>